<template>
    <view class="news-list">
        <view class="news-item">
            <image class="news-image" src="/static/1.png" mode="aspectFill"></image>
            <view class="news-content">
                <text class="news-title">郑宇伯连速度夫操作，让海滨都失声高呼</text>
                <text class="news-date">2025.9.26</text>
            </view>
        </view>

        <view class="news-item">
            <image class="news-image" src="/static/3.png" mode="aspectFill"></image>
            <view class="news-content">
                <text class="news-title">回顾经济传奇黄场高品质赛事各场面</text>
                <text class="news-date">2025.9.20</text>
            </view>
        </view>

        <view class="news-item">
            <image class="news-image" src="/static/3.png" mode="aspectFill"></image>
            <view class="news-content">
                <text class="news-title">马克·艾伦对郑宇伯威胁存在不小，我比对抗也是棒</text>
                <text class="news-date">2025.9.19</text>
            </view>
        </view>
    </view>
</template>
<style lang="scss" scoped>
.news-list {
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .news-item {
        display: flex;
        gap: 20rpx;
        padding: 24rpx;
        border-bottom: 1rpx solid #f0f0f0;

        .news-image {
            width: 192rpx;
            height: 144rpx;
            border-radius: 10rpx;
        }

        .news-content {
            flex: 1;

            .news-title {
                font-size: 30rpx;
                color: #303133;
                line-height: 46rpx;
                margin-bottom: 16rpx;
                //最多两行
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .news-date {
                font-size: 24rpx;
                color: #909399;
                line-height: 36rpx;
            }
        }
    }
}
</style>